<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2022-08-08 09:23:14
 * @LastEditors: 胡涛
 * @LastEditTime: 2024-01-14 13:19:11
-->
<template>
  <div class="login login-page">
    <div class="login-text">
      <div class="login-top">
        <div class="login-top_left">
          <img v-if="app.logo" :src="app.logo" />
          <img v-else src="@/assets/images/login/logo.png" />
        </div>
      </div>
      <div class="login-center">
        <div class="login-center_left" :style="coverBoxStyles"></div>
        <div class="login-center_right">
          <div class="signin from">
            <div class="title">{{ app.loginTitle }}</div>
            <div class="inputbox">
              <label class="labelbox" for="Account"
                >账号 <span class="en">Account</span>
              </label>
              <input
                class="input"
                type="text"
                maxlength="64"
                ref="username"
                v-model="loginModel.username"
              />
            </div>
            <div class="inputbox">
              <label class="labelbox" for="Password"
                >密码 <span class="en">Password</span></label
              >
              <input
                class="input"
                ref="password"
                type="password"
                maxlength="64"
                v-model="loginModel.password"
                @keyup.enter="loginUser"
              />
            </div>
            <a-button
              class="btn-login"
              @click="loginUser"
              :loading="submitLoading"
            >
              {{ submitLoading ? "登录中…" : "登录" }}
            </a-button>
          </div>
        </div>
      </div>
      <div class="login-bottom">
        <a class="copyright"
          ><span id="copyright">{{ app.copyright }}</span></a
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import "@/styles/login.less";
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getApplicationConfig } from "@/helpers/config";
import { message } from "ant-design-vue";
import { useAppStore, useDataStore } from "@/store";
import api from "@/api/auth";
import configurationApi from "@/api/system/configuration";

const appStore = useAppStore();
const dataStore = useDataStore();
const submitLoading = ref(false);
const app = getApplicationConfig();
const router = useRouter();
const route = useRoute();
const loginModel = {
  username: "",
  password: "",
};

const coverBoxStyles = () => {
  if (app.coverImage) {
    return {
      backgroundImage: "url(" + app.coverImage + ")",
    };
  } else {
    return {};
  }
};

const loginUser = async () => {
  if (submitLoading.value) {
    return;
  }
  try {
    submitLoading.value = true;
    let result = await api.loginUser(loginModel);
    appStore.setToken("Bearer " + result.access_token);
    let config = await configurationApi.getConfiguration();
    appStore.setGrantedPolicies(config.auth.grantedPolicies);
    appStore.setAllMenus(config.menuItems);
    appStore.setCurrentUser(config.currentUser);
    dataStore.setAllDictionaryItems(config.dictionaryItems);
    submitLoading.value = false;
    let url:any = route.query.redirectUrl  || "/";
    router.push(url);
  } catch (ex) {
    submitLoading.value = false;
    console.error("ex", ex);
    message.info("用户名或密码错误");
  }
};

onMounted(() => {});
</script>
